import React from 'react'
import '@/assets/areacontext.scss'

const Main = props => {
  let { color } = props
  return (
    <div className="main" style={ {background: color} }>
    </div>
  )
}

export default class AreaContext extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      color: '#000000'
    }
  }

  render () {
    let { color } = this.state
    return (
      <div className="area-context">
        <div className="title">
          <input 
            type="color" 
            className='color'
            value={ color }
            onChange={ e => this.setState({ color: e.target.value }) }
          />
        </div>
        <Main color={ color }/>
      </div>
    )
  }
}